<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src/node/class.node.slider.js - SceneGraph.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../../logo/logoCGSG_256x57.png" title="SceneGraph.js"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 2.2.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/CGSG.html">CGSG</a></li>
            
                <li><a href="../classes/CGSGAccordion.html">CGSGAccordion</a></li>
            
                <li><a href="../classes/CGSGAnimationManager.html">CGSGAnimationManager</a></li>
            
                <li><a href="../classes/CGSGAnimationMethod.html">CGSGAnimationMethod</a></li>
            
                <li><a href="../classes/CGSGBindEntry.html">CGSGBindEntry</a></li>
            
                <li><a href="../classes/CGSGButtonMode.html">CGSGButtonMode</a></li>
            
                <li><a href="../classes/CGSGCollisionGhostOnDemandTester.html">CGSGCollisionGhostOnDemandTester</a></li>
            
                <li><a href="../classes/CGSGCollisionManager.html">CGSGCollisionManager</a></li>
            
                <li><a href="../classes/CGSGCollisionMethod.html">CGSGCollisionMethod</a></li>
            
                <li><a href="../classes/CGSGCollisionRegionTester.html">CGSGCollisionRegionTester</a></li>
            
                <li><a href="../classes/CGSGCollisionTesterFactory.html">CGSGCollisionTesterFactory</a></li>
            
                <li><a href="../classes/CGSGColor.html">CGSGColor</a></li>
            
                <li><a href="../classes/CGSGCSSManager.html">CGSGCSSManager</a></li>
            
                <li><a href="../classes/CGSGDimension.html">CGSGDimension</a></li>
            
                <li><a href="../classes/CGSGEvent.html">CGSGEvent</a></li>
            
                <li><a href="../classes/CGSGEventManager.html">CGSGEventManager</a></li>
            
                <li><a href="../classes/CGSGHandleBox.html">CGSGHandleBox</a></li>
            
                <li><a href="../classes/CGSGImgManager.html">CGSGImgManager</a></li>
            
                <li><a href="../classes/CGSGInterpolator.html">CGSGInterpolator</a></li>
            
                <li><a href="../classes/CGSGInterpolatorLinear.html">CGSGInterpolatorLinear</a></li>
            
                <li><a href="../classes/CGSGInterpolatorTCB.html">CGSGInterpolatorTCB</a></li>
            
                <li><a href="../classes/CGSGKeyFrame.html">CGSGKeyFrame</a></li>
            
                <li><a href="../classes/CGSGMap.html">CGSGMap</a></li>
            
                <li><a href="../classes/CGSGMask.html">CGSGMask</a></li>
            
                <li><a href="../classes/CGSGMaskCache.html">CGSGMaskCache</a></li>
            
                <li><a href="../classes/CGSGMaskClip.html">CGSGMaskClip</a></li>
            
                <li><a href="../classes/CGSGMath.html">CGSGMath</a></li>
            
                <li><a href="../classes/CGSGNode.html">CGSGNode</a></li>
            
                <li><a href="../classes/CGSGNodeButton.html">CGSGNodeButton</a></li>
            
                <li><a href="../classes/CGSGNodeCircle.html">CGSGNodeCircle</a></li>
            
                <li><a href="../classes/CGSGNodeColorPicker.html">CGSGNodeColorPicker</a></li>
            
                <li><a href="../classes/CGSGNodeCurveTCB.html">CGSGNodeCurveTCB</a></li>
            
                <li><a href="../classes/CGSGNodeDomElement.html">CGSGNodeDomElement</a></li>
            
                <li><a href="../classes/CGSGNodeEllipse.html">CGSGNodeEllipse</a></li>
            
                <li><a href="../classes/CGSGNodeImage.html">CGSGNodeImage</a></li>
            
                <li><a href="../classes/CGSGNodeLine.html">CGSGNodeLine</a></li>
            
                <li><a href="../classes/CGSGNodeSlider.html">CGSGNodeSlider</a></li>
            
                <li><a href="../classes/CGSGNodeSliderHandle.html">CGSGNodeSliderHandle</a></li>
            
                <li><a href="../classes/CGSGNodeSprite.html">CGSGNodeSprite</a></li>
            
                <li><a href="../classes/CGSGNodeSquare.html">CGSGNodeSquare</a></li>
            
                <li><a href="../classes/CGSGNodeTabMenu.html">CGSGNodeTabMenu</a></li>
            
                <li><a href="../classes/CGSGNodeText.html">CGSGNodeText</a></li>
            
                <li><a href="../classes/CGSGNodeWebview.html">CGSGNodeWebview</a></li>
            
                <li><a href="../classes/CGSGParticle.html">CGSGParticle</a></li>
            
                <li><a href="../classes/CGSGParticleEmitter.html">CGSGParticleEmitter</a></li>
            
                <li><a href="../classes/CGSGParticleSystem.html">CGSGParticleSystem</a></li>
            
                <li><a href="../classes/CGSGPickNodeMethod.html">CGSGPickNodeMethod</a></li>
            
                <li><a href="../classes/CGSGPosition.html">CGSGPosition</a></li>
            
                <li><a href="../classes/CGSGRegion.html">CGSGRegion</a></li>
            
                <li><a href="../classes/CGSGRotation.html">CGSGRotation</a></li>
            
                <li><a href="../classes/CGSGScale.html">CGSGScale</a></li>
            
                <li><a href="../classes/CGSGSceneGraph.html">CGSGSceneGraph</a></li>
            
                <li><a href="../classes/CGSGSection.html">CGSGSection</a></li>
            
                <li><a href="../classes/CGSGTimeline.html">CGSGTimeline</a></li>
            
                <li><a href="../classes/CGSGTraverser.html">CGSGTraverser</a></li>
            
                <li><a href="../classes/CGSGVector2D.html">CGSGVector2D</a></li>
            
                <li><a href="../classes/CGSGView.html">CGSGView</a></li>
            
                <li><a href="../classes/CGSGWEBVIEWMODE.html">CGSGWEBVIEWMODE</a></li>
            
                <li><a href="../classes/CGSGWrapMode.html">CGSGWrapMode</a></li>
            
                <li><a href="../classes/GLOBAL_CONSTANTS.html">GLOBAL_CONSTANTS</a></li>
            
                <li><a href="../classes/GLOBAL_METHODS.html">GLOBAL_METHODS</a></li>
            
                <li><a href="../classes/GLOBAL_PROPERTIES.html">GLOBAL_PROPERTIES</a></li>
            
                <li><a href="../classes/UTIL_ARRAY.html">UTIL_ARRAY</a></li>
            
                <li><a href="../classes/WUICCGSGNodeImageFactory.html">WUICCGSGNodeImageFactory</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/Animation.html">Animation</a></li>
            
                <li><a href="../modules/Collision.html">Collision</a></li>
            
                <li><a href="../modules/Math.html">Math</a></li>
            
                <li><a href="../modules/Node.html">Node</a></li>
            
                <li><a href="../modules/ParticleSystem.html">ParticleSystem</a></li>
            
                <li><a href="../modules/Scene.html">Scene</a></li>
            
                <li><a href="../modules/Util.html">Util</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src/node/class.node.slider.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * A CGSGNodeSliderHandle represent a slider handle
 *
 * @class CGSGNodeSliderHandle
 * @module Node
 * @extends CGSGNode
 * @constructor
 * @param {Number} handleWidth width of the handle
 * @type {CGSGNodeSliderHandle}
 * @author Jeremie (jeremie.lussiez@capgemini.com)
 */
var CGSGNodeSliderHandle = CGSGNode.extend(
    {

        initialize: function (handleWidth) {
            &#x27;use strict&#x27;;
            this._super(0, 0);
            this.resizeTo(handleWidth, handleWidth);
            this.bkgcolors = [&quot;#CCCCCC&quot;];
            this.rotationCenter = new CGSGPosition(0.5, 0.5);
            this.handleWidth = handleWidth;
            this.isDraggable = true;
            this.onDrag = this.onSlide;
        },

        /**
         * Get parent slider
         *
         * @method getParentSlider
         * @public
         * @return {CGSGNodeSlider} parent slider
         */
        getParentSlider: function () {
            return this._parentNode;
        },

        /**
         * Restrain movement to x axis
         *
         * @method onSlide
         * @protected
         */
        onSlide: function () {
            this.handleWidth =
            Math.min(this._parentNode.getHeight(), this._parentNode.getWidth()) *
            2;
            var halfWidth = this.handleWidth / 2;
            var x = this.position.x;
            if (x &lt; -halfWidth) {
                x = -halfWidth;
            }
            else if (x &gt; this._parentNode.getWidth() - halfWidth) {
                x = this._parentNode.getWidth() - halfWidth;
            }
            this.translateTo(x, -this.handleWidth / 4);
            var range = this._parentNode.max - this._parentNode.min;
            this._parentNode.value =
            (this.position.x + halfWidth) *
            (range / this._parentNode.getWidth()) + this._parentNode.min;
        },

        /**
         * Default handle rendering (A rounded square with some &quot;volume&quot; effect)
         *
         * @method render
         * @protected
         * @param c {CanvasRenderingContext2D} context the context into render the node
         */
        render: function (c) {

            this.handleWidth =
            Math.min(this._parentNode.getHeight(), this._parentNode.getWidth()) *
            2;

            var borderRadius = this.handleWidth / 10;

            c.lineWidth = 2;
            c.strokeStyle = CGSGColor.darkenHex(this.bkgcolors[0], 0.7);

            var gradient = c.createLinearGradient(this.handleWidth, 0,
                                                  this.handleWidth,
                                                  this.handleWidth);
            gradient.addColorStop(0.3, this.bkgcolors[0]);
            gradient.addColorStop(1, CGSGColor.darkenHex(this.bkgcolors[0], 0.7));

            c.fillStyle = gradient;
            c.beginPath();
            c.arc(borderRadius, borderRadius, borderRadius, Math.PI,
                  -Math.PI / 2, false);
            c.lineTo(this.handleWidth - borderRadius, 0);
            c.arc(this.handleWidth - borderRadius, borderRadius, borderRadius,
                  -Math.PI / 2, 0, false);
            c.lineTo(this.handleWidth, this.handleWidth - borderRadius);
            c.arc(this.handleWidth - borderRadius,
                  this.handleWidth - borderRadius, borderRadius, 0, Math.PI / 2,
                  false);
            c.lineTo(borderRadius, this.handleWidth);
            c.arc(borderRadius, this.handleWidth - borderRadius, borderRadius,
                  Math.PI / 2, Math.PI, false);
            c.closePath();

            c.fill();
            c.stroke();

        }

    }
);

/**
 * A CGSGNodeSlider represent a slider
 *
 * @class CGSGNodeSlider
 * @module Node
 * @extends CGSGNode
 * @constructor
 * @param {Number} x Relative position on X
 * @param {Number} y Relative position on Y
 * @param {Number} width Relative dimension
 * @param {Number} height Relative Dimension
 * @type {CGSGNodeSlider}
 * @author Jeremie (jeremie.lussiez@capgemini.com)
 */
var CGSGNodeSlider = CGSGNode.extend(
    {

        initialize: function (x, y, width, height) {
            this._super(x, y);
            this.resizeTo(width, height);
            this.backgroundColor = &quot;#EEEEEE&quot;;
            this.valueColor = &quot;#50479E&quot;;
            this.min = -10;
            this.max = 10;
            this.value = 5;
            this.rotationCenter = new CGSGPosition(0.5, 0.5);

            this.onResize = this.updateSliderHandle;

            this.setHandle();
        },

        /**
         * Custom rendering
         *
         * @method render
         * @protected
         * @param c {CanvasRenderingContext2D} context the context into render the node
         */
        render: function (c) {
            c.save();
            this.outlineShape(c);
            this.renderBackground(c);
            this.renderValue(c);
            c.restore();
        },

        /**
         * Shape context to allow easy inner shadow and value rendering.
         *
         * @method outlineShape
         * @private
         * @param c {CanvasRenderingContext2D} context the context into render the node
         */
        outlineShape: function (c) {
            var borderRadius = Math.min(this.getWidth(), this.getHeight()) / 2;
            var width = this.getWidth();
            c.beginPath();
            c.arc(borderRadius, borderRadius, borderRadius, Math.PI / 2, -Math.PI / 2,
                  false);
            c.lineTo(width - borderRadius, 0);
            c.arc(width - borderRadius, borderRadius, borderRadius, -Math.PI / 2,
                  Math.PI / 2, false);
            c.lineTo(borderRadius, borderRadius * 2);
            c.closePath();
            c.clip();
        },

        /**
         * Render slider background.
         *
         * @method renderBackground
         * @private
         * @param c {CanvasRenderingContext2D} context the context into render the node
         */
        renderBackground: function (c) {

            c.fillStyle = this.backgroundColor;
            c.strokeStyle = CGSGColor.darkenHex(this.backgroundColor, 0.8);
            c.lineWidth = 4;

            var borderRadius = Math.min(this.getWidth(), this.getHeight()) / 2;
            var width = this.getWidth();

            c.beginPath();
            c.arc(borderRadius, borderRadius, borderRadius, Math.PI / 2, -Math.PI / 2,
                  false);
            c.lineTo(width - borderRadius, 0);
            c.arc(width - borderRadius, borderRadius, borderRadius, -Math.PI / 2,
                  Math.PI / 2, false);
            c.lineTo(borderRadius, borderRadius * 2);
            c.closePath();

            c.fill();
            c.stroke();

            c.shadowColor = &#x27;black&#x27;;
            c.shadowBlur = 15;
            c.shadowOffsetX = 0;
            c.shadowOffsetY = 0;

            c.beginPath();
            c.rect(0, -this.getHeight(), this.getWidth(), this.getHeight());
            c.closePath();

            c.fill();

        },

        /**
         * Render slider value (Fills background with color).
         *
         * @method renderBackground
         * @private
         * @param c {CanvasRenderingContext2D} context the context into render the node
         */
        renderValue: function (c) {

            var fillEnd = this.getWidth() / Math.abs(this.max - this.min) *
                          Math.abs(this.value - this.min);

            var gradient = c.createLinearGradient(fillEnd, 0, fillEnd,
                                                  this.getHeight());
            gradient.addColorStop(0.7, CGSGColor.darkenHex(this.valueColor, 1.5));
            gradient.addColorStop(1, this.valueColor);

            c.fillStyle = gradient;

            c.beginPath();
            c.rect(0, 0, fillEnd, this.getHeight());
            c.closePath();
            c.fill();

        },

        /**
         * Render slider value (Fills background with color).
         *
         * @method updateSliderHandle
         * @protected
         */
        updateSliderHandle: function () {
            var handleWidth = Math.min(this.getWidth(), this.getHeight()) * 2;
            var valuePosition = this.getWidth() / Math.abs(this.max - this.min) *
                                Math.abs(this.value - this.min);
            this.handle.resizeTo(handleWidth, handleWidth);
            this.handle.translateTo(valuePosition - handleWidth / 2, -handleWidth / 4);
        },

        /**
         * Set default or custom handle for this slider
         *
         * @method setHandle
         * @public
         * @param {CGSGNode} [handle] slider&#x27;s handle
         */
        setHandle: function (handle) {
            this.handle = handle;
            var handleWidth = Math.min(this.getWidth(), this.getHeight()) * 2;
            if (handle === undefined) {
                this.handle = new CGSGNodeSliderHandle(handleWidth);
                this.handle.color = this.backgroundColor;
            }
            this.addChild(this.handle);

            var valuePosition = this.getWidth() / Math.abs(this.max - this.min) *
                                Math.abs(this.value - this.min);
            this.handle.translateTo(valuePosition - handleWidth / 4, -handleWidth / 4);
        },

        /**
         * Get this slider&#x27;s handle
         *
         * @method getHandle
         * @public
         * @return {CGSGNodeSliderHandle} [handle] slider&#x27;s handle
         */
        getHandle: function () {
            return this.handle;
        },

        /**
         * Set lower bound of this slider and recompute handle position
         *
         * @method addHandle
         * @public
         * @param {Number} min lower bound of this slider
         */
        setMin: function (min) {
            if (min !== null &amp;&amp; min !== this.min &amp;&amp; min &lt; this.max) {
                this.min = min;
                this.updateSliderHandle();
            }
        },

        /**
         * Set upper bound of this slider and recompute handle position
         *
         * @method setMax
         * @public
         * @param {Number} max upper bound of this slider
         */
        setMax: function (max) {
            if (max !== null &amp;&amp; max !== this.max &amp;&amp; max &gt; this.min) {
                this.max = max;
                this.updateSliderHandle();
            }
        },

        /**
         * Set value of this slider and recompute handle position
         *
         * @method setValue
         * @public
         * @param {Number} value of this slider
         */
        setValue: function (value) {
            if (value &gt;= this.min &amp;&amp; value &lt;= this.max) {
                this.value = value;
                this.updateSliderHandle();
            }
        },

        /**
         * Get value of this slider handle position in [0-1] range
         *
         * @method getValueAsRangeRatio
         * @public
         * @return {Number} handle position in [0-1] range
         */
        getValueAsRangeRatio: function () {
            return 1 - Math.abs((this.value + this.min) / (this.max - this.min));
        }

    }
);

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
